import React, { JSX, ReactNode } from 'react';
import { Box, Button, Dialog, IconButton, Paper, Typography } from '@mui/material';
import { ReactComponent as CloseIcon } from '../../assets/close.svg';
import '@fontsource/open-sans';

interface NulDialogProps {
  open: boolean;
  onClose: () => void;
  title: string;
  operations: JSX.Element;
  width?: number;
  children?: ReactNode;
};

function NulDialog(props: NulDialogProps): JSX.Element {
  const { open, onClose, children, title, operations, width = 600 } = props;

  return (
    <>
      <Dialog
        open={open}
        onClose={onClose}
      >
        <Paper
          sx={{
            width: width,
            fontFamily: 'Open Sans',
            display: 'flex',
            fontWeight: 400,
            flexDirection: 'column',
            position: 'relative'
          }}
        >
          <Box sx={{ padding: '24px 32px 10px 32px', display: 'flex', justifyContent: 'space-between', height: '24px' }}>
            <Typography sx={{
              fontFamily: 'Open Sans',
              fontStyle: 'normal',
              fontWeight: 600,
              fontSize: '17px',
              lineHeight: '125%',
              color: '#262E35'
            }}
            >
              {title}
            </Typography>
            <IconButton
              aria-label='close'
              sx={{ justifySelf: 'flex-end', padding: 0 }}
              onClick={onClose}
            >
              <CloseIcon />
            </IconButton>
          </Box>
          <Box sx={{ padding: '5px 32px 10px 32px', flexGrow: 1, position: 'relative' }}>
            {children}
          </Box>
          <Box sx={{ padding: '20px 32px 20px 32px', height: '32px' }}>
            {operations}
          </Box>
        </Paper>
      </Dialog>
    </>
  );
}

interface NulCommonOperationsProps {
  positiveText?: string;
  negativeText?: string;
  onPositiveClicked: () => void;
  onNegativeClicked: () => void;
};

function NulCommonOperations(props: NulCommonOperationsProps): JSX.Element {
  const { positiveText = '确定', negativeText = '取消', onPositiveClicked, onNegativeClicked } = props;

  return (
    <Box sx={{ display: 'flex', flexDirection: 'row-reverse' }}>
      <Button
        variant='contained'
        disableElevation
        sx={{
          width: '70px',
          textTransform: 'none',
          marginLeft: '10px'
        }}
        onClick={onPositiveClicked}
      >
        {positiveText}
      </Button>
      <Button
        variant='outlined'
        disableElevation
        sx={{
          width: '70px',
          textTransform: 'none',
          marginLeft: '10px'
        }}
        onClick={onNegativeClicked}
      >
        {negativeText}
      </Button>
    </Box>
  );
}

interface NulFormItemProps {
  hint: string;
  component: ReactNode;
  necessary?: boolean;
};

function NulFormItem(props: NulFormItemProps): JSX.Element {

  const { hint, component, necessary = true } = props;

  return (
    <Box sx={{ padding: '5px 0px 5px 0px', height: '40px', display: 'flex', justifyContent: 'space-between' }}>
      <Box sx={{ paddingLeft: '5px', display: 'flex' }}>
        <Typography sx={{
          fontFamily: 'Open Sans',
          fontStyle: 'normal',
          fontWeight: 400,
          fontSize: '14px',
          lineHeight: '20px'
        }}>
          {hint}
        </Typography>
        {necessary &&
          <Typography sx={{ color: '#C40000', paddingLeft: '2px' }}>*</Typography>
        }
      </Box>
      <Box sx={{ width: '360px' }}>
        {component}
      </Box>
    </Box>
  );
}

export { NulDialog, NulCommonOperations, NulFormItem };